<template>
<div class="myCard">
  <!-- <div class="title">{{title}}</div> -->
  <div class="title">
    <!-- 当封装的组件中 同时使用多个插槽的时候
    如何区分他们呢？
    答：我们可以通过具名插槽来区分，也就是给
    slot标签上添加name属性，那么当我们使用该组件的使用
    就可以通过这个名字来分发内容 -->
    <slot name="title"></slot>
  </div>
  <div class="content">
    <slot></slot>
  </div>
</div>
</template>
<script>
export default {
  props: {
    // title: String // String表示规定title值的类型
    title: {
      type: String, // String表示规定title值的类型
      default: '我是默认值' // 设置title的默认值
    }
  }
}
</script>
<style lang="scss" scoped>
.myCard{
    min-width: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: inline-block;
    .title{
        border-bottom: 1px solid #ccc;
        padding: 20px;
    }
    .content{
        padding: 20px;
    }
}
</style>
